Vue Js Remove Object Property: In Vue, you can use the delete keyword followed by the name of the property to remove an object property. This is commonly used in the context of reactive data, where you may want to remove a property from a data object based on certain conditions. For example, if you have an object called person with a name and age property, and you want to remove the age property, you can use delete person.age. This will remove the age property from the person object, and any reactivity associated with that property will be lost. It’s important to note that this method only works on object properties and not on array elements.
How can you remove a property from an object in Vue.js?
This code creates a Vue instance that displays an object and a button. When the button is clicked, the removeProperty method is called, which removes the role property from the object using Vue’s $delete method.
Vue Js Remove Object Property Example
<div id="app">
<p>Object: {{ myObject }}</p>
<button @click="removeProperty">Remove Property</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
myObject: {
id: 1,
name: 'Andrew',
role:'developer'
}
}
},
methods: {
removeProperty() {
this.$delete(this.myObject, 'role');
}
}
});
</script>
Output of Vue Js Remove Object property:
Before delete property
After Delete Property
